<template>
  <view
    class="order-item"
    @tap="goToOrderDetail"
  >
    <view class="card-header">
      <view
        class="left"
        @tap.stop="goToStoreList"
      >
        <text class="tag">自提</text>
        <text class="shop-name">{{ order.shopName }}</text>
        <image
          src="/static/images/base/right.png"
          class="arrow"
        />
      </view>
      <text class="status">已完成</text>
    </view>

    <view class="card-body">
      <scroll-view
        class="product-images"
        scroll-x
      >
        <image
          v-for="image in productImages"
          :key="image"
          class="thumb"
          :src="image"
          mode="aspectFill"
        />
      </scroll-view>

      <view class="meta">
        <text class="time">{{ order.orderTime }}</text>
        <view class="summary">
          <text class="count">共{{ order.productCount }}件</text>
          <text class="amount">¥ {{ $tools.formatPrice(order.price) }}</text>
        </view>
      </view>
    </view>

    <view class="card-footer">
      <button
        class="btn-outline"
        @tap="repeatOrder"
      >
        再来一单
      </button>
    </view>
  </view>
</template>

<script>
export default {
  name: "OrderItem",
  props: {
    order: {
      type: Object,
      required: true,
      default: () => ({})
    }
  },
  computed: {
    productImages() {
      const list = this.order?.orderDetailList || []
      return list.map(item => item.productLogo)
    }
  },
  methods: {
    repeatOrder() {
      // this.$emit("repeat", this.order)
    },
    goToStoreList() {
      uni.navigateTo({
        url: "/pages/store/list/list"
      })
    },
    goToOrderDetail() {
      uni.navigateTo({
        url:
          "/pages/order-subs/order-detail/order-detail?orderId=" +
          this.order.orderId
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.order-item {
  background: #ffffff;
  border-radius: $uni-border-radius-lg;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.04);
  padding: $uni-spacing-row-lg;
}

.card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.left {
  display: flex;
  align-items: center;
  margin-bottom: $uni-spacing-row-sm;
}

.tag {
  font-size: 20rpx;
  color: #e60012;
  border: 1rpx solid #e60012;
  border-radius: 6rpx;
  padding: 2rpx 8rpx;
  margin-right: 8rpx;
}

.shop-name {
  font-size: 28rpx;
  color: #222222;
}

.arrow {
  width: 30rpx;
  height: 30rpx;
  margin-left: 8rpx;
}

.status {
  font-size: $uni-font-size-base;
  color: $uni-text-color-grey;
}

.card-body {
  display: flex;
  flex-direction: column;
  margin-top: 12rpx;
}

.product-images {
  width: 100%;
  white-space: nowrap;
  margin-bottom: $uni-spacing-row-base;
}

.thumb {
  display: inline-block;
  width: 120rpx;
  height: 120rpx;
  border-radius: $uni-border-radius-sm;
  background: #f5f5f5;
  margin-right: $uni-spacing-row-base;
}

.meta {
  flex: 1;
  display: flex;
  justify-content: space-between;
  margin-bottom: $uni-spacing-row-sm;
}

.time {
  font-size: 22rpx;
  color: $uni-text-color-grey;
}

.summary {
  display: flex;
  align-items: baseline;
  justify-content: flex-end;
  gap: 8rpx;
}

.count {
  font-size: 24rpx;
  color: $uni-text-color-grey;
}

.amount {
  font-size: 28rpx;
  color: $uni-text-color;
  font-weight: 600;
}

.card-footer {
  display: flex;
  justify-content: flex-end;
  margin-top: 16rpx;
}

.btn-outline {
  height: 50rpx;
  line-height: 50rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 $uni-spacing-row-sm;
  border: 1rpx solid #e60012;
  color: #e60012;
  background: #ffffff;
  border-radius: $uni-border-radius-base;
  font-size: $uni-font-size-base;
}
</style>
